<template>
	<view class="scanService-container">
		<image src="@/static/scanService/service-bg.png" class="banner"></image>
		<view class="deviceNo">设备编号：CDS19283004</view>
		
		<!-- 设备列表 -->
		<view class="deviceList-box">
			<!-- 快充充电宝 -->
			<view class="deviceList-item fast">
				<view class="top">
					<view class="icon-box">
						<image src="@/static/scanService/fast-icon.png" class="icon"></image>
						<view class="device-num">1</view>
					</view>
					<view class="pop">强制弹出</view>
				</view>
				<view class="bottom">
					<view :class="{'bottom-btn': true, 'activeBtn': true}">锁仓</view>
					<view class="bottom-btn">空仓</view>
				</view>
			</view>
			<!-- 慢充充电宝 -->
			<view class="deviceList-item slow">
				<view class="top">
					<view class="icon-box">
						<image src="@/static/scanService/slow-icon.png" class="icon"></image>
						<view class="device-num">2</view>
					</view>
					<view class="device-No">cds0987654343</view>
					<view class="power">
						<view class="power-text">1%</view>
						<image v-if="true" src="@/static/scanService/battery-icon1.png" class="battery-icon"></image>
						<image v-if="false" src="@/static/scanService/battery-icon2.png" class="battery-icon"></image>
						<image v-if="false" src="@/static/scanService/battery-icon3.png" class="battery-icon"></image>
						<image v-if="false" src="@/static/scanService/battery-icon4.png" class="battery-icon"></image>
						<image v-if="false" src="@/static/scanService/battery-icon5.png" class="battery-icon"></image>
						<image v-if="false" src="@/static/scanService/battery-icon6.png" class="battery-icon"></image>
					</view>
				</view>
				<view class="bottom">
					<view :class="{'bottom-btn': true, 'activeBtn': true}">锁仓</view>
					<view :class="{'bottom-btn': true, 'activeBtn': false}">弹出</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.scanService-container {
	min-height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;
	
	.banner {
		width: 702rpx;
		height: 400rpx;
		border-radius: 40rpx;
	}
	
	.deviceNo {
		color: #999;
		text-align: center;
		font-size: 24rpx;
		line-height: 40rpx;
		margin: 24rpx 0 40rpx 0;
	}
	
	.deviceList-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 24rpx;
		
		.deviceList-item {
			display: flex;
			gap: 40rpx;
			flex-direction: column;
			padding: 20rpx;
			border-radius: 24rpx;
			background-color: #fff;
			
			.top,.bottom {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.icon-box {
					position: relative;
					
					.icon {
						width: 44rpx;
						height: 56rpx;
					}
					
					.device-num {
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
						color: #fff;
						font-size: 24rpx;
					}
				}
				
				.bottom-btn {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #999;
					height: 56rpx;
					border-radius: 12rpx;
					background: rgba(0, 0, 0, 0.06);
				}
			}
			
			.top {
				position: relative;
				flex: 1;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				
				&::after {
					position: absolute;
					left: 0;
					bottom: -20rpx;
					content: '';
					display: block;
					width: 100%;
					height: 2rpx;
					background-color: #f9f9f9;
				}
				
				.pop {
					color: rgba(51, 119, 255, 1);
					padding: 8rpx 16rpx;
					border: 2rpx solid rgba(51, 119, 255, 1);
					background-color: rgba(51, 119, 255, 0.06);
					border-radius: 12rpx;
				}
			}
			
			.bottom {
				flex: 1;
				gap: 12rpx;
				
				.activeBtn {
					color: #fff;
					background-color: #3377FF;
				}
			}
		}
		
		.slow {
			.top {
				.device-No {
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: $uni-main-color;
					background: rgba(0, 197, 130, 0.06);
					border-radius: 12rpx;
					font-size: 20rpx;
					max-width: 192rpx;
					height: 56rpx;
					padding: 0 12rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				
				.power {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					color: $uni-main-color;
					font-size: 20rpx;
					
					.power-text {
						symbols: 6rpx;
					}
					
					.battery-icon{
						width: 40rpx;
						height: 22rpx;
					}
				}
			}
		
			.bottom {
				.activeBtn {
					color: #fff;
					background-color: $uni-main-color;
				}
			}
		}
	}
}
</style>
